// Any plugins you want to setting has to be imported
// Detail plugins list see https://www.tinymce.com/docs/plugins/
// Custom builds see https://www.tinymce.com/download/custom-builds/
// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration

import { RawEditorOptions as EditorOptions } from 'tinymce/tinymce';

/** 工具栏 */
export const toolbar = [
  'print preview cut copy paste searchreplace undo redo fontfamily fontsize forecolor backcolor bold italic underline strikethrough',
  'lineheight bullist numlist alignleft aligncenter alignright outdent indent blockquote removeformat subscript superscript anchor charmap code codesample',
  'ltr rtl table tabledelete hr pagebreak nonbreaking image media link fullscreen wordcount help',
];

/** 插件 */
export const plugins = [
  'lists',
  'advlist',
  'anchor',
  'autolink',
  // 'autoresize',
  'autosave',
  'charmap',
  'code',
  'codesample',
  'directionality',
  'fullscreen',
  'help',
  'image',
  'importcss',
  'link',
  'lists',
  'media',
  'nonbreaking',
  'pagebreak',
  'preview',
  // 'quickbars', //快捷工具栏
  'searchreplace',
  'table',
  'wordcount',
  // 'letterspacing',
  // 'indent2em',
];

/** 编辑器配置信息类型 */
export declare type RawEditorOptionsType = RawEditorOptions;
/** 编辑器配置信息
 * 详见：http://tinymce.ax-z.cn/configure/integration-and-setup.php
 */
export interface RawEditorOptions extends EditorOptions {
  //#region "集成配置：编辑器的基本配置"
  /** 自动获得焦点
   * 该参数用于让编辑器加载完成后自动获得光标焦点，值为true时为当前实例，为string时是指定其他编辑的实例ID。
   */
  auto_focus?: true | string;
  /** 设置主程序结构所在url
   * 如果你的tinymce.js和其它应该放到与它同级的文件夹（比如插件皮肤等）因为某种原因没有放在一起。比如tinymce.js你是用cdn引入的，但皮肤和插件你想放在项目里之类的场景，那么用此参数可以解决你的问题。
   */
  base_url?: string;
  /** 缓存请求后缀
   * 该参数可在TinyMCE加载js和css文件时，在URL请求后面自动加上指定的后缀，多用于解决缓存问题。
   */
  cache_suffix?: string;
  /** 内容安全策略
   * 为编辑器的iframe内容设置自定义内容安全策略。了解详情可自行搜索：HTML5内容安全策略（CSP）。
   */
  content_security_policy?: string;
  /** 引入站外插件
   * 可用于引入本站外部提供的插件，TinyMCE将根据插件加载规则加载指定URL的插件。当从CDN加载TinyMCE或希望TinyMCE主目录与自定义插件分开时，可使用此配置。
   * 其值因为一个对象，形如{插件名:插件URL}
   */
  external_plugins?: Record<string, string>;
  /** 开关内联模式用于存内容的‘隐藏input’
   * 默认tinymce在开启内联模式（inline）会生成一个‘隐藏的input’用于执行保存动作时存放编辑器的内容。此选项默认开启，如果不需要生成这个input，可以设为false禁用此功能。
   */
  hidden_input?: boolean;
  /** 初始化结束后执行
   * 此配置选项允许你在编辑器初始化完成后，执行自己的回调函数。此函数支持一个参数，该参数为编辑器实例对象的引用。
   */
  init_instance_callback?: (editor: any) => void;
  /** 初始化前执行
   * 与init_instance_callback类似，不过这个是在开始前执行一个自定义函数。
   */
  setup?: (editor: any) => void;
  /** 指定需加载的插件
   * 为TinyMCE指定要加载的插件，此插件必须已存在plugins目录内，多个插件用空格分隔。默认TinyMCE不会加载任何插件。
   */
  plugins?: string | string[];
  /** 只读模式
   * 将编辑器设置成只读模式，不可编辑。tinymce.Editor['编辑器id'].setMode('design'); //开启编辑模式；tinymce.Editor['编辑器id'].setMode('readonly'); //开启只读模式。
   */
  readonly?: boolean;
  /** selector是TinyMCE的重要配置选项，使用CSS选择器语法来确定页面上哪个元素被TinyMCE替换成编辑器 */
  selector?: string;
  /**
   * 后缀
   * 详细解释一下这东西，tinymce加载插件的方式很特别，如果主程序叫tinymce.js，它在加载插件时就会去找插件文件夹里的plugin.js；如果主程序叫tinymce.min.js，它在加载插件时就会去找plugin.min.js。看到这里不知道你懂没懂，这个参数简单说就是用来设置“.min”这个部分的。
   */
  suffix?: string;
  /**
   * 使用Node替代selector
   * 当不方便使用css选择器指定编辑器容器的时候，例如容器需要动态创建，这种情况，可以通过直接赋予其Node对象来创建编辑器。
   * 注意：selector优先级要高于target，如要使用target，则参数中不要出现selector。
   */
  target?: HTMLElement;
  //#endregion
  //#region "UI界面配置：配置编辑器的外观，包括菜单和工具栏"
  /** 区块列表
   * 用于配置“菜单：格式→区块”中的选项（非菜单：格式→格式→区块）。它的值形如：title=block，多个用分号分隔。
   */
  block_formats?: string;
  /** 隐藏右下角技术支持
   * 设为false时，隐藏编辑器界面右下角的“Powered by Tiny”（官方汉化为：由Tiny驱动）字样。为支持TinyMCE推广，建议保留。
   */
  branding?: boolean;
  /** 上下文菜单
   * 指定上下文菜单出现的项目。所谓上下文菜单，就是在编辑器内容出现的右键关联菜单。在当鼠标在链接上时是编辑链接，当鼠标在表格上时是编辑表格。菜单可根据不同的环境出现不同的内容。其值为任何已注册的菜单项，允许使用“|”作为分隔。
   */
  contextmenu?: string | string[] | false;
  /** 该选项可防止上下文菜单覆盖（或重叠）编辑器中的特定节点。此选项接受CSS选择器。在与指定选择器匹配的节点上打开关联菜单时，关联菜单将呈现在节点下方，而不是单击发生的位置。如果节点下方的浏览器窗口中没有足够的空间，则关联菜单将显示在节点上方。 */
  contextmenu_avoid_overlap?: string | string[];
  /** 在编辑器中屏蔽浏览器本身的右键菜单
   * 警告：此选项可能会导致单击右键时出现意外行为。
   */
  contextmenu_never_use_native?: boolean;
  /** 此选项可指定某些元素成为编辑器的一部分，当焦点移动到此选择器匹配的元素上时，不会触发编辑器的blur事件。 */
  custom_ui_selector?: string;
  /** 模态窗口允许拖动
   * 为tinymceUI的模态窗口添加拖动模式。默认是关闭的。
   */
  draggable_modal?: boolean;
  /** 隐藏底栏的元素路径
   * 设为false时，可隐藏底栏的元素路径
   */
  elementpath?: boolean;
  /** 当编辑器使用内联模式（inline）时，使用此配置可指定一个根节点，编辑器事件只在该根节点下与selector匹配的DOM中响应。 */
  event_root?: string;
  /** 指定工具栏在某一容器顶部固定。 */
  fixed_toolbar_container?: string;
  /** 作用跟上面一样，不同的是传值是一个Element容器。当上面参数 fixed_toolbar_container 与此参数一同使用时，fixed_toolbar_container优先级更高。 */
  fixed_toolbar_container_target?: HTMLElement;
  /** 字体列表
   * 配置编辑器可选则的字体列表。格式为：标题1=字体名1,字体名2可多个;标题2=字体名3。每一项用分号分隔，字体名之间用逗号分隔。字体名写法可参考CSS的font-family。
   */
  font_formats?: string;
  /** 文字大小列表
   * 定义字体大小列表的项目，每一项用空格分隔。数值单位与CSS写法相同。
   */
  fontsize_formats?: string;
  /** 为tinymce附加新图标集合
   * 该选项允许你扩展tinymce的默认图标库，新附加的图标具有更高的优先级，可以部分替换当前系统内的图标，实现tinymce的局部定制化。
   * 该参数的实现与加载方式类似。不是指定图标的js文件，而是指定图标文件所在的文件夹。
   * tinymce将在初始化时从 《tinymce根目录/icons/该参数值/icons.js》中加载图标。
   * 所以该值类似于主题名称。
   */
  icons?: string;
  /** 附加新图标的url路径
   * 通过一个url来指定图标js文件的所在位置。但设置该参数以后，还需要再用icons一次，这和引入外部语言包的用法一致。
   */
  icons_url?: string;
  /** 内联模式
   * 开启内联模式，详见：http://tinymce.ax-z.cn/general/use-tinymce-inline.php
   */
  inline?: boolean;
  /** 行高列表
   * 为行高下拉菜单指定对应的行高的值。
   */
  lineheight_formats?: string;
  /** 宽：如参数只提供数字，则默认单位为像素（px），如提供了单位，TinyMCE会以css模式去理解它。单位支持px/%/em/vh/vw */
  width?: number | string;
  /** 高：如参数只提供数字，则默认单位为像素（px），如提供了单位，TinyMCE会以css模式去理解它。单位支持px/%/em/vh/vw */
  height?: number | string;
  /** 最大宽：如参数只提供数字，则默认单位为像素（px），如提供了单位，TinyMCE会以css模式去理解它。单位支持px/%/em/vh/vw
   * 根据autoresize插件启用与否，max_height和min_height会存在两种不同的行为：
   * 1、不存在autoresize插件（默认）：控制的是用户通过编辑器右下角控件可拖拽的最大最小高度。
   * 2、使用autoresize插件：控制编辑器自动伸缩的最大最小高度。
   * 注：此参数默认设置的是可编辑区域，而不是整个编辑器
   */
  max_width?: number;
  /** 最大高：如参数只提供数字，则默认单位为像素（px），如提供了单位，TinyMCE会以css模式去理解它。单位支持px/%/em/vh/vw
   * 根据autoresize插件启用与否，max_height和min_height会存在两种不同的行为：
   * 1、不存在autoresize插件（默认）：控制的是用户通过编辑器右下角控件可拖拽的最大最小高度。
   * 2、使用autoresize插件：控制编辑器自动伸缩的最大最小高度。
   * 注：此参数默认设置的是可编辑区域，而不是整个编辑器
   */
  max_height?: number;
  /** 最小宽：如参数只提供数字，则默认单位为像素（px），如提供了单位，TinyMCE会以css模式去理解它。单位支持px/%/em/vh/vw
   * 根据autoresize插件启用与否，max_height和min_height会存在两种不同的行为：
   * 1、不存在autoresize插件（默认）：控制的是用户通过编辑器右下角控件可拖拽的最大最小高度。
   * 2、使用autoresize插件：控制编辑器自动伸缩的最大最小高度。
   * 注：此参数默认设置的是可编辑区域，而不是整个编辑器
   */
  min_width?: number;
  /** 最小高：如参数只提供数字，则默认单位为像素（px），如提供了单位，TinyMCE会以css模式去理解它。单位支持px/%/em/vh/vw
   * 根据autoresize插件启用与否，max_height和min_height会存在两种不同的行为：
   * 1、不存在autoresize插件（默认）：控制的是用户通过编辑器右下角控件可拖拽的最大最小高度。
   * 2、使用autoresize插件：控制编辑器自动伸缩的最大最小高度。
   * 注：此参数默认设置的是可编辑区域，而不是整个编辑器
   */
  min_height?: number;
  /** 自定义菜单
   * 指定菜单栏及下拉菜单上放置的项目（其还提供创建自定义标题菜单的方法）。
   * 其值是一个包含菜单项目的对象，由 菜单项:{标题,子菜单项} 组成。
   */
  menu?: Record<
    string,
    {
      title: string;
      items: string;
    }
  >;
  /** 1级菜单
   * 指定哪些一级菜单显示，或调整菜单顺序。
   */
  menubar?: boolean | string;
  /** 移动端配置
   * 当tinymce检测到当前环境为移动设备时，该参数允许你配置在移动设备生效配置参数。
   */
  mobile?: RawEditorOptions;
  /** 内容预展示文本(占位文本) */
  placeholder?: string;
  /** 菜单[格式]预览样式 */
  preview_styles?: false | string;
  /** [插入]快捷工具栏
   * 在编辑器内容区，光标插入（回车）或选择时，在光标位置出现的快捷工具栏。可使用任何在工具栏（toolbar）中可用的项目。
   * 使用该选项必须先启用quickbars插件。
   */
  quickbars_insert_toolbar?: string;
  /** [选择]快捷工具栏
   * 在编辑器内容区，光标插入（回车）或选择时，在光标位置出现的快捷工具栏。可使用任何在工具栏（toolbar）中可用的项目。
   * 使用该选项必须先启用quickbars插件。
   */
  quickbars_selection_toolbar?: string;
  /** 移除某菜单项
   * 用于从下拉菜单中移除某些菜单项。当配合menu来创建动态菜单时此选项可能有用。
   */
  removed_menuitems?: string;
  /** 调整编辑器大小工具
   * 在编辑器右下角有一个可以拖动的标记，鼠标按住它可以改变编辑器的大小。默认resize: true。
   * 可选值为：true（仅允许改变高度）, false（完全不让你动）, 'both'（宽高都能改变，注意引号）。
   * 如要禁止用户拖动改变编辑器大小，设为false即可。
   */
  resize?: boolean | 'both';
  /** 设置皮肤
   * 为TinyMCE指定皮肤，v5默认皮肤是“oxide”，它包含浅色版本和深色版本。深色版本名为“oxide-dark”。指定的皮肤应在TinyMCE的/skin/ui文件夹内，如不存在，TinyMCE将使用默认皮肤。
   */
  skin?: boolean | string;
  /** 引入外部皮肤
   * 如果皮肤未存在上述文件夹内，可使用该选项，用URL指定一个皮肤的位置。
   */
  skin_url?: string;
  /** 显示隐藏状态栏
   * 状态栏指的是编辑器最底下、左侧显示dom信息、右侧显示Tiny版权链接和调整大小的那一条。默认是显示的，设为false可将其隐藏。
   */
  statusbar?: boolean;
  /** 自定义段落样式格式
   * 注意，这货与formats的写法规则差不多，但定义的东西不一样。这货定义后出现在段落选项里。formats则是改写默认格式。
   */
  style_formats?: any[];
  /** 替换还是附加到自定义段落样式列表
   * 翻译成这么长一串，意思表达清楚就好。该选项的作用就是上面定义的style_formats是覆盖掉默认的列表，还是在默认列表后面附加自定义的配置。
   */
  style_formats_merge?: boolean;
  /** 隐藏当前不可用的样式列表
   * 该选项设为true时自动隐藏与当前选择内容不匹配的样式。
   */
  style_formats_autohide?: boolean;
  /** 设置主题
   * 指定应用的主题，TinyMCE默认的主题名为：“Silver”。有关皮肤和主题的区别，可参考：http://tinymce.ax-z.cn/general/customize-ui.php 这一节。
   * 指定的主题应在TinyMCE的/theme文件夹内，如不存在，TinyMCE将使用默认主题。
   */
  theme?:
    | string
    | false
    | ((
        editor: any,
        elm: HTMLElement,
      ) => {
        editorContainer: HTMLElement;
        iframeContainer: HTMLElement;
        height?: number;
        iframeHeight?: number;
        api?: {
          show: () => void;
          hide: () => void;
          setEnabled: (state: boolean) => void;
          isEnabled: () => boolean;
        };
      });
  /** 引入外部主题
   * 如果主题未存在上述文件夹内，可使用该选项，用URL指定一个主题的位置。
   * 取值与皮肤指定文件夹不同，需要具体到js文件。
   */
  theme_url?: string;
  /** 自定义工具栏
   * 指定工具栏上显示的按钮，使用空格分隔，用 | 分组。如要隐藏菜单栏，将其值设为false即可。
   */
  toolbar?:
    | boolean
    | string
    | string[]
    | Array<{
        name?: string;
        items: string[];
      }>;
  /** 工具栏模式
   * 默认wrap不收缩工具栏，取值为floating或sliding时，将第一行放不下的工具栏按钮缩进抽屉（3个点的图标）里，scrolling则采用移动端的横线滚动方式。
   */
  toolbar_mode?: ToolbarMode;
  /** 工具栏位置。选择工具栏上下位置，可实现在底部 */
  toolbar_location?: 'top' | 'bottom' | 'auto';
  /** 工具栏分组
   * 该参数将颠覆现有的工具栏布局模式。它的作用是，自定义一个新的工具栏按钮，当点击这个新的按钮时，出现横向的下拉按钮集合。
   * 启用toolbar_groups会令toolbar_mode参数默认为floating，所以无需指定toolbar_mode。如果手动指定toolbar_mode为别的值，则自定义的工具栏分组全都不显示，并在console里给出错误提示。
   * {
        formatting: {
            text: '文字格式',
            tooltip: 'Formatting',
            items: 'bold italic underline | superscript subscript',
        },
        alignment: {
            icon: 'align-left',
            tooltip: 'alignment',
            items: 'alignleft aligncenter alignright alignjustify',
        },
    }
   */
  toolbar_groups?: any;
  /** 内联模式始终显示工具栏
   * 选项控制内联编辑器的工具栏和菜单栏的自动显示和隐藏行为。默认禁用，当开启后内联模式下将始终显示工具栏和菜单栏，而不是在失去焦点时隐藏他们。
   */
  toolbar_persist?: boolean;
  /** 粘性工具栏
   * 粘性工具栏（或停靠工具栏），在向下滚动网页直到不再可见编辑器时，将工具栏和菜单停靠在屏幕顶部。
   */
  toolbar_sticky?: boolean;
  //#endregion
  //#region "内容外观配置：配置Tinymce编辑区内的内容外观"
  /** 为编辑区body指定id */
  body_id?: string;
  /** 为编辑区body指定类 */
  body_class?: string;
  /** 为编辑区指定css文件
   * 如果你希望在经典模式中，编辑区也可以有与周围相同的样式，此选项可以帮你实现。引入一个css文件，实现编辑区css自定义。通常配合body_class&body_id使用。
   */
  content_css?: boolean | string | string[];
  /** 设为true，则content_css可以跨域引入css文件。 */
  content_css_cors?: boolean;
  /** 直接为编辑区编写css
   * 在此选项内编写的css将直接注入到编辑器创建的iframe内部（在head内创建style），其创建的样式不会与内容一起被提交，可以放心使用。
   */
  content_style?: string;
  /** 内置样式开关
   * 为保证编辑器输出相对干净的代码，主题内会定义一些样式来实现某些功能。如不想使用内置样式，设为false即可。
   */
  inline_boundaries?: boolean;
  /** 使用内置样式的元素
   * 可通过它来指定inline_boundaries可应用于哪些元素。默认：a[href],code。也可以加入其它内联元素，如：b,strong,i,em。
   * 如果你设置了除默认那俩的其它元素，还需要去定义他们的样式，设置样式的方法可参考 http://tinymce.ax-z.cn/configure/content-appearance.php#content_css 部分。
   */
  inline_boundaries_selector?: string;
  //#endregion
  //#region "图片&文件上传配置：设置TinyMCE的图片和文件上传参数"
  /** 开关使用Data URL/Blob URL插入图片和文件到内容区的方式。例如，图像是使用imagetools插件处理后插入到内容区的，此时图像并未真正上传到服务器，而是以Data URL/Blob URL的方式插入在内容中。
   * 该选项默认是开启的，如禁用，则必须配置images_upload_url，即指定接收图片上传的远程地址，如未指定该配置，则禁用无效。
   * 也可使用tinymce自带方法 uploadImages 手动上传。
   */
  automatic_uploads?: boolean;
  /** 文件上传回调 */
  file_picker_callback?: (callback: Function, value: any, meta: Record<string, any>) => void;
  /** 文件选择器的使用场景 */
  ile_picker_types?: string;
  /** TinyMCE默认会给每个上传的文件生成唯一的文件名。有时候我们不希望这么做，例如，automatic_uploads被开启时，尽管当前图片文件没有变，但使用imagetools插件对图像进行每一次操作都会导致文件上传，并且每次都将使用不同的文件名。 */
  images_reuse_filename?: boolean;
  /** 图片上传自定义实现 */
  images_upload_handler?: (
    blobInfo: {
      id: () => string;
      name: () => string;
      filename: () => string;
      blob: () => Blob;
      base64: () => string;
      blobUri: () => string;
      uri: () => string | undefined;
    },
    progress: (percent: number) => void,
  ) => Promise<string>;
  //#endregion
  //#region "本地化配置：设置TinyMCE的语言功能，包括文字方向和界面语言"
  /** 文字方向
   * 设置文字的方向是从左到右，还是从右到左。
   */
  directionality?: 'ltr' | 'rtl';
  /** 界面语言
   * 设置TinyMCE的界面语言，tiny默认是英文的，要变中文需要下载汉化包放到指定目录内，然后使用该配置：language:'zh_CN'
   */
  language?: string;
  /** 必须将语言包放入langs文件夹内才可以使用language配置语言。如无法实现，则可以使用language_url指定语言包存放的URL，例如：language_url : '/languages/zh_CN.js', */
  language_url?: string;
  //#endregion
  /** 默认链接目标 */
  default_link_target?: string;
  /** 链接标题 */
  link_title?: false | string;
  /** 对象大小调整 */
  object_resizing?: boolean | string;
  /** 去除宽高属性 */
  image_dimensions?: boolean | string;
}

declare type ToolbarMode = 'floating' | 'sliding' | 'scrolling' | 'wrap';
